<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no,email=no" name="format-detection">
    <link rel="stylesheet" href="${ctx }/res/css/main.css">
    <link rel="stylesheet" href="${ctx }/res/css/plugins.css">
    <link rel="stylesheet" href="${ctx }/res/hplus/js/plugins/layer/skin/layer.css">
    <style type="text/css">
    	.form-groups .form-input.upload {
	      background: url("${ctx}/res/img/icon/upload.jpg") left top/100% 100% no-repeat; 
	    }
	    
	    .my-uploadImg {
	    	width:120px;
	    	height:120px;
	    }
	    
	    .layui-layer-dialog .layui-layer-content {
			color:black;
		}
    </style>
    <title>软装到家</title>
</head>
<body>
 <div class="simple-nav w-1200 margin-0-auto reg-nav">
    <img class="fl reg-logo" src="${ctx }/res/img/icon/reg-logo.png">
    <span class="fr text-black f12">我已经注册,现在就<a class="text-red" href="${ctx }/user/login">登录</a></span>
</div>
<div class="reg-body w-1200 margin-0-auto">
    <div class="reg-step clear">
        <div class="clear margin-0-auto dis-table">
        <span class="active step-item" style="z-index:100;">
            <span class="info-text">完善信息</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:101;">
            <span class="info-text">待审核</span>
            <span class="bar"></span>
        </span>
        <span class="step-item" style="z-index:102;">
            <span class="info-text">注册完成</span>
        </span>
        </div>
    </div>
    <form id='registerForm' method="post">
    <div class="form-groups">
        <h3 class="form-groups-title">账户信息</h3>
        <div class="form-controller">
            <label class="form-label icon-required">手机号:</label>
            <input class="form-input" required name="username">
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">昵称:</label>
            <input class="form-input" required name="nickName">
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">联系人姓名:</label>
            <input class="form-input" name="realName" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">登录密码:</label>
            <input class="form-input" type="password" name="password" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">确认密码:</label>
            <input class="form-input" type="password" name="passwordConfirm" required>
        </div>
    </div>
    <!-- <div class="form-groups">
        <h3 class="form-groups-title">联系人信息</h3>
        <div class="form-controller">
            <label class="form-label icon-required">联系人姓名:</label>
            <input class="form-input" name="realName" required>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">手机号码:</label>
            <input class="form-input" name="mobile" required>
        </div> 
        <div class="form-controller">
            <label class="form-label icon-required">联系人邮箱:</label>
            <input class="form-input" name="email" required>
        </div>
    </div> -->
    <div class="form-groups">
        <h3 class="form-groups-title">公司信息</h3>
        <div class="form-controller">
            <label class="form-label icon-required">公司所在地:</label>
            <select class="form-input" name="province.id" id="provinceId" required>
	            	<option value="">请选择省份</option>
	                <c:forEach items="${provinces }" var="p">
						<option value="${p.id }">${p.name }</option>
					</c:forEach>
	            </select>
	            <select class="form-input" name="city.id" id="cityId" required>
	                <option value="">请选择城市</option>
	            </select>
	            <select class="form-input" name="district.id" id="districtId">
	                <option value="">请选择区县</option>
	            </select>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">选择装修公司:</label>
            <!-- <input class="form-input" name="company" required> -->
            <select class="form-input" name="companyUser.id" id="companyId" required>
            	<option value="">请选择装修公司</option>
            </select>
        </div>
        <!-- <div class="form-controller">
            <label class="form-label icon-required">所在公司名称:</label>
            <input class="form-input" name="company" required>
        </div> -->
        <!-- <div class="form-controller">
            <label class="form-label icon-required">公司注册地址:</label>
            <input class="form-input" name="registerAddress" required>
        </div> -->
        <!-- <div class="form-controller">
            <label class="form-label icon-required">公司办公地址:</label>
            <input class="form-input" name="workPlace" required>
        </div> -->
        <div class="form-controller">
            <label class="form-label icon-required">从业年限:</label>
            <input class="form-input" name="workAge" required>年
        </div>
        <div class="form-controller-ul-li">
            <label class="form-label icon-required">擅长风格:</label>
            <ul>
            <c:forEach items="${houseStyles }" var="h">
            	<li onclick="changeOn(this)">${h.name }</li>
            </c:forEach>
            </ul>
            <!-- <input class="form-input" name="goodAtStyles" required> -->
        </div>
        <!-- <div class="form-controller">
            <label class="form-label icon-required" id="images">作品上传:</label>
            <label class="upload form-input" id="imageLabel"><input type="file" onchange="onImageUploade(this)"></label>
             <textarea class="design-remark" name="description" placeholder="在这里描述您的作品"></textarea>
            <div class="input-remark">请将您的优秀作品上传并为作品进行描述。</div>
        </div> -->
        <div class="form-controller">
            <label class="form-label">备注:</label>
            <textarea class="form-input remark" name="remark" maxlength="100" rows="30" cols="50"
                      style="width: 300px;height: 100px;"></textarea>
        </div>
        <div class="form-controller">
            <label class="form-label icon-required">验证码:</label>
            <input class="form-input input-xs" name="valiCode" required>
            <img class="form-input-addon" src="${ctx }/validateCode/get" style="cursor:pointer;" title="点击更换验证码" onclick="changeVali(this);" id="valiCodeImg">
            <div ><a style="color:blue;font-size:9px;vertical-align:bottom;text-decoration:underline;cursor:pointer;margin-left:10px" onclick="changeVali();">看不清楚？换一张试试</a></div>
        </div>
         <!-- <div class="form-controller">
            <label class="form-label icon-required">推荐人:</label>
            <input class="form-input" type="text" name="recUserName">
        </div> -->
        <div class="form-controller">
            <label class="form-label">&nbsp;</label>
            <button class=" btn btn-primary submit" onclick="return form_submit();">同意协议并注册</button>
        </div>
    </div>
    </form>
</div>
<div class="login-foot w-1200 margin-0-auto">
    <div class="links">
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
        <a href="#">法律声明</a>
        <a href="#">人才招聘</a>
        <a href="#">手机达达</a>
        <a href="#">友情链接</a>
        <a href="#">English Site</a>
    </div>
    <div class="copyright">Copyright © 2016 bumall.com 长沙立民网络科技有限公司 版权所有</div>
</div><script type="text/javascript" src="${ctx }/res/js/lib.js"></script>
<script type="text/javascript" src="${ctx }/res/js/plugins.js"></script>
<script type="text/javascript" src="${ctx }/res/js/modules.js"></script>
<script src="${ctx }/res/hplus/js/plugins/layer/layer.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('.bxslider').bxSlider({
            preloadImages:'all',
            auto:true
        });
    }); 
    function changeOn(obj){
    	if($(obj).hasClass('on'))
    		$(obj).removeClass('on');
    	else
    		$(obj).addClass('on');
    }
    function changeVali() {
    	$("#valiCodeImg").attr('src','${ctx }/validateCode/get?'+new Date().getTime());
    }
    
    function onImageUploade(input) {
    	var fd = new FormData();
    	fd.append("image", input.files[0]);
    	
    	$.ajax({
    		url: "${ctx}/image/upload7",
    		type: "POST",
    		processData: false,
    		contentType: false,
    		data: fd,
    		success: function(imageUrl) {
    			var image = '<image class="my-uploadImg" src="' + imageUrl + '"/>';
    			$('#imageLabel').after(image);
    		}
    	});
    }
    
    function form_submit() {
    	var arr = new Array();
    	/* $('#images').parent().find('img').each(function() {
    		arr.push($(this).attr('src'));
    	}); */
    	/* var images = arr.join(','); */
    	$('.form-controller-ul-li').find('.on').each(function(){
    		arr.push($(this).html());
    	});
    	var styles=arr.join('、');
    	info = $('#registerForm').serializeArray();
    	var json = {};
    	for(var i = 0;i < info.length; i ++ ) {
    		var theArr = info[i];
    		var key = theArr.name;
    		var value = theArr.value;
    		json[key] = value;
    	}
    	json["goodAtStyles"]=styles; 
    	/* json["designImages"] = images; */
    	$.ajax({
    		url: "${ctx}/user/doDesignerRegister",
    		data:json,
    		dataType: "json",
    		type: "post",
    		success: function(data) {
    			if (data.success) {
    				//loading带文字
    				layer.msg('提交成功，正在进行跳转...',{time: 5000, icon:6,shade: [0.5, '#f5f5f5']});
    				var userId = data.userId;    
    				location.href = '${ctx}/user/goNextStep?registerType=designer&step=2&userId='+userId;
    			} else {
    				layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
    			}
    		}
    	});
    	return false;
    }
    
    $('#provinceId').change(function() {
    	var provinceId = $(this).val();
    	$('#cityId').html('');
    	$('#districtId').html('');
    	if (provinceId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?provinceId=" + provinceId,
    			dataType: "json",
    			success: function(array) {
    				$('#cityId').append('<option value="">城市</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#cityId').append(option);	
    				}
    			}
    		});
    	}
    });

    $('#cityId').change(function() {
    	var cityId = $(this).val();
    	$('#districtId').html('');
    	if (cityId != '') {
    		$.ajax({
    			url: "${ctx}/user/findArea?cityId=" + cityId,
    			dataType: "json",
    			success: function(array) {
    				$('#districtId').append('<option value="">地区</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#districtId').append(option);	
    				}
    			}
    		});
    	}
    });
    
    $('#districtId').change(function() {
    	var districtId = $(this).val();
    	var cityId = $('#cityId').val();
    	var provinceId = $('#provinceId').val();
    	$('#companyId').html('');
    	if (cityId != '') {
    		$.ajax({
    			url: "${ctx}/company/findCompany?province.id="+provinceId+"&city.id=" + cityId+"&district.id="+districtId,
    			dataType: "json",
    			success: function(array) {
    				$('#companyId').append('<option value="">请选择装修公司</option>');
    				for (var i = 0; i < array.length; i++) {
    					var obj = array[i];
    					var option = '<option value="' + obj.id + '">' + obj.name + '</option>';
    					$('#companyId').append(option);	
    				}
    			}
    		});
    	}
    });
</script>
</body>
</html>
